<template>
  <div id="rptVSBarCode">
    <Breadcrumb content="报告单元和分管类别对照" />
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="基础字典">
          <Splitpanes class="area">
            <!-- 左侧报告单元列表 -->
            <Pane :size="(600 / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input
                    v-model="searchForm.rptSearchValue"
                    type="search"
                    clearable
                    class="vxeInputSearch"
                    placeholder="关键字查询"
                    @clear="getRptGroupList"
                    @keyup="getRptGroupList"
                    @search-click="getRptGroupList()"
                  ></vxe-input>
                  <vxe-button
                    type="text"
                    class="button-blue"
                    icon="vxe-icon-refresh"
                    content="刷新"
                    :loading="showLoading"
                    @click="getRptGroupList"
                  ></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table
                  ref="labRptTable"
                  border
                  class="mytable-scrollbar"
                  show-header-overflow
                  show-overflow
                  align="center"
                  :row-config="{ isCurrent: true, isHover: true }"
                  @current-change="rptRowClick"
                  :data="rptList"
                  :loading="showLoading"
                >
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column field="rptGroup" title="报告单元编号"></vxe-column>
                  <vxe-column field="rptGroupName" title="报告单元名称"></vxe-column>
                  <vxe-column field="businessType" title="业务类型"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <!-- 中间对照信息 -->
            <Pane :size="((conWidth - 1000) / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <!-- <vxe-input
                v-model="searchValueVS"
                type="search"
                clearable
                class="vxeInputSearch"
                placeholder="关键字查询"
                @clear="getReportGroupList"
                @keyup="getReportGroupList"
                @search-click="getReportGroupList()"
                  ></vxe-input>-->
                  <vxe-button
                    type="text"
                    class="button-blue"
                    icon="vxe-icon-refresh"
                    content="刷新"
                    :loading="showLoading"
                    @click="getRptGroupList"
                  ></vxe-button>

                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除"></vxe-button>
                  <!--  @click="deleteRrtVsBarCodeList" -->
                </template>
              </vxe-toolbar>

              <div class="leftTable">
                <vxe-table
                  ref="rptVsBarCodeTable"
                  border
                  class="mytable-scrollbar"
                  show-header-overflow
                  show-overflow
                  align="center"
                  :row-config="{ isCurrent: true, isHover: true }"
                  :data="rptVsBarCodeList"
                  :loading="showLoading"
                  @cell-dblclick="deleteRptVsBarCode"
                >
                  <vxe-column type="checkbox" width="30px" align="center"></vxe-column>
                  <vxe-column type="seq" title="序号" width="50"></vxe-column>
                  <vxe-column field="barcodeNo" title="分管类别编号"></vxe-column>
                  <vxe-column field="barcodeNa" title="分管类别名称"></vxe-column>
                  <vxe-column field="shortName" title="简称"></vxe-column>
                  <vxe-column
                    field="color"
                    title="颜色"
                    :edit-render="{ autofocus: '.vxe-input--inner' }"
                  >
                    <template #default="{ row }">
                      <el-tag
                        class="margin-lr-xs"
                        :style="{ background: row.color ? row.color : '' }"
                        v-if="row.color"
                      >{{ row.color }}</el-tag>
                    </template>
                    <template #edit="{ row }">
                      <vxe-input v-model="row.color" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <!-- 右侧信息 -->
            <Pane :size="(500 / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input
                    v-model="searchValue"
                    type="search"
                    clearable
                    class="vxeInputSearch"
                    placeholder="关键字查询"
                    @clear="getRptGroupList"
                    @keyup="getRptGroupList"
                    @search-click="getRptGroupList()"
                  ></vxe-input>
                  <vxe-button
                    type="text"
                    class="button-blue"
                    icon="vxe-icon-refresh"
                    content="刷新"
                    :loading="showLoading"
                    @click="getRptGroupList"
                  ></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table
                  ref="barCodeTypeTable"
                  border
                  class="mytable-scrollbar"
                  show-header-overflow
                  show-overflow
                  align="center"
                  :row-config="{ isCurrent: true, isHover: true }"
                  @cell-dblclick="barCodeRowClick"
                  :data="barCodeList"
                  :loading="showLoading"
                >
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column
                    field="barcodeNo"
                    title="分管类别编码"
                    width="60"
                    :edit-render="{ autofocus: '.vxe-input--inner' }"
                  >
                    <template #edit="{ row }">
                      <vxe-input
                        v-model="row.barcodeNo"
                        clearable
                        @clear="() => {}"
                        @keyup.enter.native="() => {}"
                        placeholder="关键字查询"
                      ></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="barcodeNa"
                    title="分管类别名称"
                    width="146"
                    :edit-render="{ autofocus: '.vxe-input--inner' }"
                  >
                    <template #edit="{ row }">
                      <vxe-input
                        v-model="row.barcodeNa"
                        clearable
                        @clear="() => {}"
                        @keyup.enter.native="() => {}"
                        placeholder="关键字查询"
                      ></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="shortName"
                    title="简称"
                    width="90"
                    :edit-render="{ autofocus: '.vxe-input--inner' }"
                  >
                    <template #edit="{ row }">
                      <vxe-input v-model="row.shortName" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="color"
                    title="颜色"
                    :edit-render="{ autofocus: '.vxe-input--inner' }"
                  >
                    <template #default="{ row }">
                      <el-tag
                        class="margin-lr-xs"
                        :style="{ background: row.color ? row.color : '' }"
                        v-if="row.color"
                      >{{ row.color }}</el-tag>
                    </template>
                    <template #edit="{ row }">
                      <vxe-input v-model="row.color" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="操作日志">
          <LogInfo requestUrl="/api/labRptVSBarcode"></LogInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import LogInfo from '@/components/LogInfo.vue'; //操作日志
import { AppStore } from '@/stores/store';
let store = AppStore();
// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let conWidth = ref(document.documentElement.clientWidth);
const barCodeList = reactive([]);
let selevctBarCodeRow :any = reactive({
  id: ''
});
let rptList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let searchValue = ref('');
let searchValueVS = ref('');

const searchForm = reactive({
  orgId: store.userInfo.orgId,
  rptSearchValue: '',
  name: store.userInfo.orgName
});

const rptVsBarCodeList = reactive([]);
let defaultProps = {
  children: 'children',
  label: 'name'
};
// 方法定义区 =============
onMounted(() => {
  //getBarCodeList();
  getRptGroupList();
});

// 获取报告单元列表
function getRptGroupList() {
  rptList.length = 0;
  showLoading.value = true;
  const url = '/api/rptGroup/getRptGroupList';
  let obj = {
    keyWords: searchForm.rptSearchValue,
    orgId: searchForm.orgId
  };
  proxy.$http
    .post(url, obj)
    .then((res: any) => {
      rptList.push(...res.data);
      if (rptList.length > 0) {
        rptRowClick({ row: rptList[0] });
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

// 获取分管类别列表
function getBarCodeList(rptGroup: string) {
  barCodeList.length = 0;
  showLoading.value = true;
  const url = '/api/labRptVSBarcode/findBarCodeTypeListByRpt';
  let obj = {
    keyWords: searchValue.value,
    rptGroup: rptGroup
  };
  proxy.$http
    .post(url, obj)
    .then((res: any) => {
      barCodeList.push(...res.data);
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

// 点击当前行// 行点击事件
function rptRowClick({ row }: any) {
  (proxy.$refs.labRptTable as any).setCurrentRow(row);
  selevctBarCodeRow = row;
  findBarcodeList(row.rptGroup);
  getBarCodeList(row.rptGroup);
}

// 获取中间的报告单元信息
function findBarcodeList(rptGroup: string) {
  rptVsBarCodeList.length = 0;
  const url = '/api/labRptVSBarcode/findBarCodeListByRptId/' + rptGroup;
  proxy.$http
    .get(url)
    .then((res: any) => {
      rptVsBarCodeList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
//barCodeRowClick
function barCodeRowClick({ row }: any) {
  const url = '/api/labRptVSBarcode/addRptBarCode';
  let addRptVsBarCode = {
    rptGroup: selevctBarCodeRow.rptGroup,
    barcodeNo: row.barcodeNo,
    seq: rptVsBarCodeList.length + 1
  };
  proxy.$http
    .post(url, addRptVsBarCode)
    .then((res: any) => {
      findBarcodeList(selevctBarCodeRow.rptGroup);
      getBarCodeList(selevctBarCodeRow.rptGroup);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

// 删除数据
function deleteRptVsBarCode({ row }: any) {
  const url = '/api/labRptVSBarcode/deleteRptVSBarCode';
  proxy.$http
    .post(url, {
      id: row.vsBarCodeTypeId,
      name: row.name
    })
    .then((res: any) => {
      findBarcodeList(selevctBarCodeRow.rptGroup);
      getBarCodeList(selevctBarCodeRow.rptGroup);
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 删除数据
function deleteRptVsBarCodeList() {
  const selectRows = (proxy.$refs.rptVsBarCodeTable as any).getCheckboxRecords();
  if (selectRows.length > 1) {
    VxeMessage('一次只可选择删除一条数据', VxeNotifyType.warning);
    return;
  }
  if (selectRows.length <= 0) {
    VxeMessage('请选择需要删除的对照', VxeNotifyType.warning);
    return;
  }
  const url = '/api/labRptVSBarcode/deleteRptVSBarCode';
  proxy.$http
    .post(url, {
      id: selectRows[0].vsBarCodeTypeId,
      name: selectRows[0].name
    })
    .then((res: any) => {
      findBarcodeList(selevctBarCodeRow.rptGroup);
      getBarCodeList(selevctBarCodeRow.rptGroup);
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
</script>
<style lang="scss" scoped>
#rptVSBarCode {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    :deep(.el-tabs) {
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 39px);
        padding: 0;
        .el-tab-pane {
          height: 100%;
        }
      }
    }
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .leftTable {
        height: calc(100% - 39px);
        :deep(.vxe-table--render-wrapper) {
          height: 100%;
          .vxe-table--main-wrapper {
            height: 100%;
            .vxe-table--body-wrapper {
              height: calc(100% - 26px) !important;
            }
          }
        }
        :deep(.vxe-table--render-default) {
          height: calc(100% - 36px) !important;
        }
      }

      // 右侧基本信息表单
      .baseForm {
        .el-row {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
        .form-footer {
          :deep(.el-form-item__content) {
            margin-left: 120px !important;
          }
        }
        .el-form-item--large {
          margin-bottom: 10px;
        }
        .el-radio {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
